<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: evil
  Date: 16-11-3
  Time: 下午7:22
  顶部导航栏
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<nav id="navbar" class="navbar navbar-inverse nav-top" style="min-width: 960px" role="navigation">
    <div class="container-fluid">
        <div class="box">
            <!--链接-->
            <div>
                <div style="width: 100px" class="navbar-header">
                    <a class="navbar-brand" href="/">HebeuCS</a>
                </div>
                <div style="width: 300px">
                    <ul class="nav navbar-nav">
                        <li id="nav-index"><a href="/">首页</a></li>
                        <c:choose>
                            <c:when test="${admin.userName!=null}">
                                <li id="nav-admin"><a href="${pageContext.request.contextPath}/admin/index">后台管理</a>
                                </li>
                            </c:when>
                        </c:choose>
                    </ul>
                </div>
            </div>
            <!--站位-->
            <div style="width: 300px">
            </div>
            <!--搜索-->
            <div class="search">
                <input id="search-input" class="form-control search-input-radius"
                       type="text" name="search"
                       placeholder="搜索你感兴趣的内容...">
                <button id="search-btn" class="btn btn-default search-button-radius">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </div>
            <!--消息-->
            <div id="nav-message">
                <img src="/static/image/message.png" width="30" height="30">
                <span class="label label-danger">1条未读消息</span>
            </div>
            <!--头像区-->
            <div style="height: 70px;line-height: 70px">
                <div>
                    <c:choose>
                        <c:when test="${user.userName!=null}">
                            <ul id="downmenu" style="list-style: none">
                                <li class="mydropdown">
                                    <a href="#" class="mydropdown-toggle" data-toggle="mydropdown">
                                        <img id="head-img" class="img-circle head-img"
                                             src="${pageContext.request.contextPath}/static/image/headimg/${user.userImgPath}"
                                             alt="头像">
                                    </a>
                                    <ul id="menu" class="mydropdown-menu" style="list-style: none">
                                        <li style="text-align: left">
                                            <div id="head-list"
                                                 style="width: 250px;height: 100px;line-height: 100px;
                                                         background: url('${pageContext.request.contextPath}/static/image/menu_background.jpg')">

                                                <img id="head-img-big" class="img-circle head-img2"
                                                     src="${pageContext.request.contextPath}/static/image/headimg/${user.userImgPath}"
                                                     alt="头像">

                                                <span style="margin-left: 30px"><b> 用户:${user.userRealName}</b></span>
                                            </div>
                                        </li>
                                        <li>
                                            <a href="#">个人中心</a>
                                        </li>
                                        <li>
                                            <a id="exit-login" href="#" onclick="javascript:exit_login()">退出登录</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>

                        </c:when>
                        <c:otherwise>
                            <div id="login_btn" style="float: right;">
                                <a href="${pageContext.request.contextPath}/login" class="btn btn-default">登录</a>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
    </div>
</nav>

<script>
    function removeCookie(name)
    {
        var date = new Date();
        date.setTime(date.getTime() - 10000);
        document.cookie = name + "=a; expires=" + date.toGMTString() + ";path=/";
    }
    function exit_login()
    {
        removeCookie('ue');
        removeCookie('up');
        location.href = '${pageContext.request.contextPath}/login/exit';
    }

    $(function ()
    {
        var menu = $('#menu');
        $('#downmenu').hover(
            function ()
            {
                menu.fadeIn(500)
            }
            , function ()
            {
                menu.fadeOut(500)
            })
    });

    $(function ()
    {
        $('#nav-message').click(function ()
        {
            alert("未读消息");
        });
        $('#search-btn').click(function ()
        {

        });
    })
</script>